import React, { useEffect } from 'react';
import { DispenserControl } from '../components/Dispenser/DispenserControl';
import { DispenserQueue } from '../components/Dispenser/DispenserQueue';
import { DeliveryRecords } from '../components/Dispenser/DelieveryRecords';
import { Sidebar } from '../components/layout/Sidebar';
import { useDispenser } from '../hooks/useDispenser';
import { useRecords } from '../hooks/useRecords';
import { Loading } from '../components/common/loading';
import { Toast } from '../components/common/Toast';
import { useToast } from '../hooks/useToast';
import { Link } from 'react-router-dom';
import { ArrowLeft } from 'lucide-react';

export function DispenserPage() {
  const { toast, showToast, hideToast } = useToast();
  const { robotCount, idleRobotCount, pendingOrders, isLoading: isLoadingDispenser, handleDispenseMedication } = useDispenser();
  const { records, isLoading: isLoadingRecords, error } = useRecords();

  useEffect(() => {
    if (error) {
      showToast('获取记录失败，请稍后重试');
    }
  }, [error, showToast]);


  return (
    <div className="min-h-screen bg-gray-100">
      <Sidebar />
      <div className="ml-64 p-6">
        <div className="flex items-center gap-4 mb-6">
          <Link to="/" className="p-2 hover:bg-gray-200 rounded-full">
            <ArrowLeft size={24} />
          </Link>
          <h1 className="text-3xl font-bold">智能发药机控制台</h1>
        </div>
        <div className="grid grid-cols-3 gap-6">
          <div className="col-span-2 space-y-6">
            <div className="grid grid-cols-2 gap-6">
              <div className="bg-white p-4 rounded-lg shadow-md">
                <h2 className="text-xl font-bold mb-4">系统状态</h2>
                <div className="space-y-2">
                  <p className="text-gray-600">
                    总机器人数量: <span className="font-medium">{robotCount}</span>
                  </p>
                  <p className="text-gray-600">
                    空闲机器人: <span className="font-medium">{idleRobotCount}</span>
                  </p>

                  <p className="text-gray-600">
                    待处理订单: <span className="font-medium">{pendingOrders.length}</span>
                  </p>
                </div>
              </div>

              <DispenserControl
                onDispenseMedication={handleDispenseMedication}
                idleRobotCount={idleRobotCount}
                pendingOrders={pendingOrders}
                isDispenserBusy={isLoadingDispenser}
              />
            </div>

            {isLoadingDispenser ? (
              <Loading />
            ) : (
              <DispenserQueue pendingOrders={pendingOrders} />
            )}
          </div>

          <div className="space-y-6">
            {isLoadingRecords ? (
              <Loading />
            ) : (
              <DeliveryRecords records={records} />
            )}
          </div>
        </div>
      </div>
      {toast && (
        <Toast
          message={toast.message}
          type={toast.type}
          onClose={hideToast}
        />
      )}
    </div>
  );
}
